<template>
  <div class="bg-purple-dark">
    <div class="cardInformation">
      <div class="blueIcon" />
      <div class="dataName">企业</div>
      <div class="recentlyDay">更新时间：{{ updateData }}</div>
    </div>

    <div class="card-filters">
      <el-menu
        class="el-menu-demo"
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">今日</el-menu-item>
        <el-menu-item index="2">昨日</el-menu-item>
        <el-menu-item index="3">本周</el-menu-item>
        <el-menu-item index="4">上周</el-menu-item>
      </el-menu>
      <div class="time-filter">
        <span>
          统计时间： 
        </span>
        <el-date-picker
          v-model="search.date"
          class="intervalTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-value="search.date"
          :clearable="false"
          @change="getData"
        />
      </div>
    </div>

    <div class="monitoringCardUl">
      <div class="monitoringCardList">
        <div class="monitoringCardTxt">新增企业</div>
        <div class="monitoringCardNum">{{ kpiCardData.newTenantNum }}</div>
      </div>
      <div class="monitoringCardList">
        <div class="monitoringCardTxt">活跃企业</div>
        <div class="monitoringCardNum">{{ kpiCardData.activeTenantNum }}</div>
      </div>
      <div class="monitoringCardList">
        <div class="monitoringCardTxt">活跃率</div>
        <div class="monitoringCardNum">{{ kpiCardData.activeTenantRate }}</div>
      </div>
      <div class="monitoringCardList">
        <div class="monitoringCardTxt">启动量</div>
        <div class="monitoringCardNum">{{ kpiCardData.startNum }}</div>
      </div>
    </div>
    <div class="cardActive">
      <div class="title">活跃度分析</div>
      <div class="isActive">
        <div class="subTitle">活跃</div>
        <div class="firmList">
          <div v-for="(item, index) in getTop" :key="index" class="firmLi">
            <div class="firmName">{{ item.tenantName }}</div>
            <div class="firmTime">{{ item.activeTime }}小时</div>
            <el-progress
              class="progress"
              :text-inside="true"
              :stroke-width="14"
              :percentage="item.persent"
              :stroke-linecap="'square'"
              :show-text="false"
            />
          </div>
        </div>
      </div>
      <div class="isAormancy">
        <div class="subTitle">休眠</div>
        <div class="firmList">
          <div v-for="(item, index) in getBottom" :key="index" class="firmLi">
            <div class="firmName">{{ item.tenantName }}</div>
            <div class="firmTime">{{ item.activeTime }}小时</div>
            <el-progress
              class="progress"
              :text-inside="true"
              :stroke-width="14"
              :percentage="item.persent"
              :stroke-linecap="'square'"
              :show-text="false"
              color="#FFB35D"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'

var minutes = 'YYYY-MM-DD HH:mm:ss'
var now = new Date() // 当前日期
var nowDayOfWeek = now.getDay() // 今天本周的第几天
var nowDay = now.getDate() // 当前日
var nowMonth = now.getMonth() // 当前月
var nowYear = now.getFullYear() // 当前年

export default {
  name: 'ActiveData',
  props: {},
  data() {
    return {
      updateData: moment(now).format(minutes),
      activeIndex: '1', // 默认导航
      search: {
        date: [],
        beginDate: '',
        endDate: ''
      }
    }
  },
  computed: {
    ...mapState('monitor', [
      'kpiCardData', // 指标卡数据
      'topRankData', // 活跃排行
      'bottomRankData' // 休眠排行
    ]),
    getTop(state) {
      const { topRankData = {} } = state
      const allData = topRankData.records || []
      const newTopRankData = allData.slice(0, 5) // 返回最大
      for (let i = 0; i < newTopRankData.length; i++) {
        if (newTopRankData[0].activeTime) {
          const result =
            (newTopRankData[i].activeTime / newTopRankData[0].activeTime) * 100
          newTopRankData[i]['persent'] = Math.floor(result)
        } else {
          newTopRankData[i]['persent'] = 0
        }
      }

      return newTopRankData
    },
    getBottom(state) {
      const { bottomRankData = {} } = state
      const allData = bottomRankData.records || []
      const newBottomRankData = allData.slice(0, 5)

      for (let i = 0; i < newBottomRankData.length; i++) {
        if (newBottomRankData[0].activeTime) {
          const result =
            (newBottomRankData[i].activeTime /
              newBottomRankData[0].activeTime) *
            100
          newBottomRankData[i]['persent'] = Math.floor(result)
        } else {
          newBottomRankData[i]['persent'] = 0
        }
      }
      return newBottomRankData
    }
  },
  created() {
    this.handleTimeNew()
  },
  methods: {
    handleTimeNew(time) {
      const startDay = new Date(nowYear, nowMonth, nowDay)
      const endDay = new Date(nowYear, nowMonth, nowDay + 1)
      const beginDate = moment(startDay).format(minutes)
      const endDate = moment(endDay).format(minutes)
      this.search.date = [] 
      this.search.date.push(beginDate, endDate)
      this.$store.dispatch('monitor/getKpiCard', {
        startTime: beginDate,
        endTime: endDate
      })
      this.$store.dispatch('monitor/getTopRank', {
        startTime: beginDate,
        endTime: endDate
      })
      this.$store.dispatch('monitor/getBottomRank', {
        startTime: beginDate,
        endTime: endDate
      })
    },
    handleSelect(key) {
      // 导航
      if (key === '1') {
        this.handleTimeNew()
      }
      if (key === '2') {
        const yesterdayStartDate = new Date(nowYear, nowMonth, nowDay - 1)
        const yesterdayEndDate = new Date(nowYear, nowMonth, nowDay)
        const beginDate = moment(yesterdayStartDate).format(minutes)
        const endDate = moment(yesterdayEndDate).format(minutes)
        this.search.date = [] 
        this.search.date.push(beginDate, endDate)
        this.$store.dispatch('monitor/getKpiCard', {
          startTime: beginDate,
          endTime: endDate
        })
        this.$store.dispatch('monitor/getTopRank', {
          startTime: beginDate,
          endTime: endDate
        })
        this.$store.dispatch('monitor/getBottomRank', {
          startTime: beginDate,
          endTime: endDate
        })
      }
      if (key === '3') {
        const weekStartDate = new Date(
          nowYear,
          nowMonth,
          nowDay - nowDayOfWeek - 6
        )
        const beginDate = moment(weekStartDate).format(minutes)
        const weekEndDate = new Date(nowYear, nowMonth, nowDay + 1) // 本周结束
        const endDate = moment(weekEndDate).format(minutes)
        
        this.search.date = [] 
        this.search.date.push(beginDate, endDate)
        this.$store.dispatch('monitor/getKpiCard', {
          startTime: beginDate,
          endTime: endDate
        })
        this.$store.dispatch('monitor/getTopRank', {
          startTime: beginDate,
          endTime: endDate
        })
        this.$store.dispatch('monitor/getBottomRank', {
          startTime: beginDate,
          endTime: endDate
        })
      }
      if (key === '4') {
        const weekStartDate = new Date(
          nowYear,
          nowMonth,
          nowDay - nowDayOfWeek - 13
        ) // 上周结束
        const beginDate = moment(weekStartDate).format(minutes)
        const weekEndDate = new Date(
          nowYear,
          nowMonth,
          nowDay - nowDayOfWeek - 6
        ) // 上周结束
        const endDate = moment(weekEndDate).format(minutes)
        this.search.date = [] 
        this.search.date.push(beginDate, endDate)
        this.$store.dispatch('monitor/getKpiCard', {
          startTime: beginDate,
          endTime: endDate
        })
        this.$store.dispatch('monitor/getTopRank', {
          startTime: beginDate,
          endTime: endDate
        })
        this.$store.dispatch('monitor/getBottomRank', {
          startTime: beginDate,
          endTime: endDate
        })
      }
    },
    getMonthDays(myMonth) {
      // 上个月
      const monthStartDate = new Date(nowYear, myMonth, 1)
      const monthEndDate = new Date(nowYear, myMonth + 1, 1)
      const days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
      return days
    },
    getData(e) {
      const beginDate = e && moment(e[0]).format(minutes)
      const endDate = e && moment(e[1]).format(minutes)
      this.$store.dispatch('monitor/getKpiCard', {
        startTime: beginDate,
        endTime: endDate
      })
      this.$store.dispatch('monitor/getTopRank', {
        startTime: beginDate,
        endTime: endDate
      })
      this.$store.dispatch('monitor/getBottomRank', {
        startTime: beginDate,
        endTime: endDate
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import './style';
</style>
